<html>
<head>
<title>Concal Options</title>
<style>
select { width:300px;margin-bottom:15px; }
button { width: 70px;} 
#container {width:349;height:470px;padding:15px 15px 15px 15px;background: url(bg.png);background-repeat: no-repeat;}
#commands { width: 80%; text-align: center; } 
</style>
<script type="text/javascript">

// sets the control to checked if its is contains the reference value
function setSelected(fieldId, refValue){
  // Define nwords
  var options = document.getElementById(fieldId);
  if (!options)
    return;
  for (var i = 0; i < options.children.length; i++) {
    var child = options.children[i];
    if (child.value == refValue) {
      child.selected = "true";
      break;
    }
  }
}

// Returns the value of the selected element
function getSelected(fieldId)
{
  var options = document.getElementById(fieldId);
  if (!options)
    return null;
  return options.children[options.selectedIndex].value;
}

// Restores select box state to saved value from localStorage.
function restore() 
{
    var background = chrome.extension.getBackgroundPage();
    if ((!background.settings.selectedgroup) || (!background.settings.nwords) || (!background.settings.eventduration))
        return;
    // Put group on combo
    var el = document.getElementById('selectedgroup');    
    if (el){
        var groups = background.getGroups();
        var txt = '';
        for(var i=0;i<groups.length;i++){
            if (background.settings.selectedgroup && background.settings.selectedgroup==groups[i].id){
                txt = txt + '<option value="'+groups[i].id+'" selected>'+groups[i].name+'</option>';
            } else {
                txt = txt + '<option value="'+groups[i].id+'">'+groups[i].name+'</option>';
            }
        }
        el.innerHTML = txt;
    }    
    // Define nwords
    setSelected("nwords",background.settings.nwords);
    setSelected("eventduration",background.settings.eventduration);
}

function showMsg(msg)
{
    var status = document.getElementById("status");
    if (status.innerHTML==='')
        status.innerHTML = msg;
    else
        status.innerHTML = status.innerHTML + ',' + msg;
    setTimeout(function() {status.innerHTML = "";}, 750 );
}

// Saves options to localStorage.
function save() 
{
    var background = chrome.extension.getBackgroundPage();     
    localStorage["nwords"] = getSelected("nwords");
    localStorage["eventduration"] = getSelected("eventduration");    
    var selectedgroup = getSelected("selectedgroup");
    if (localStorage["selectedgroup"]!==selectedgroup){
        localStorage["selectedgroup"] = selectedgroup;
        background.updateSettings();
        if (background.target_tabid)
            background.loadContacts(background.target_tabid);
    }    
    else{
        background.updateSettings();
    }
    // Update status to let user know options were saved.
    showMsg("Options Saved.");
}

// Saves options to localStorage.
function validadeduration() 
{
    var eventduration = getSelected("eventduration");
    if (eventduration!='60'){
        setSelected('nwords', '2');
    }
}

// Saves options to localStorage.
function validanwords() {
    var nwords = getSelected("nwords");
    var eventduration = getSelected("eventduration");
    if (eventduration!='2'){
        if (eventduration!='60'){
            setSelected('nwords', '2');
        }
    }
}

</script>
</head>
<body onload="restore()">
<div id="container">
    <h3>Contact Calendar Options</h3>
    <small style="color:red;">The max number of words when duration different<br>than <b>the default (one hour)</b> is always <b>two</b>.</small>
    <br><br>
    Number of words:<br>
    <select id="nwords" onchange="validanwords()">
     <option value="1">First name</option>
     <option value="2" checked>First Two names</option>
     <option value="3">Full Name</option>
    </select>
    <br>
    Event Duration:<br>
    <select id="eventduration" onchange="validadeduration()">
        <option value="10">10 minutes</option>
        <option value="15">15 minutes</option>
        <option value="30">30 minutes</option>
        <option value="45">45 minutes</option> 
        <option value="60" checked>1 Hour (default)</option>
        <option value="75">1:15 Hours</option>
        <option value="90">1:30 Hours</option>
        <option value="105">1:45 Hours</option>
    </select>
    <br>
    Contact Group:<br><select id="selectedgroup"></select><br>
<br><br>
<div id="commands">
<button onclick="save()">Save</button> <button onclick="restore()">Restore</button> 
</div>
<br><span id='status'></span>
<br><br>
<a href="debug.html">debug mode</a>
</div>
</body>
</html>